<template>
  <KView class="payment-goods">
    <page-header title="订单信息" @back-click="toBack"></page-header>
    <KView class="payment-goods-line"></KView>

    <template v-if="orderData!==null">
      <KView class="payment-goods-content">
        <delivery-address :order="orderData" @click="toChangeAddress"></delivery-address>
        <KView class="payment-goods-content-line"></KView>

        <KView class="payment-goods-content-goodsdata">
          <KView class="payment-goods-content-shop clearfix">
            <KView class="payment-goods-content-shop-icon">
              <img class="sys-img" :src="shopIcon" mode="aspectFit">
            </KView>
            <KView class="payment-goods-content-shop-text ellipsis">{{orderData.shopName}}</KView>
          </KView>
          <goods-item v-for="goods in orderData.goodsList" :key="goods.modelId" :goods="goods"></goods-item>
        </KView>
        <KView class="payment-goods-content-line"></KView>

        <KView class="payment-goods-content-info">
          <KView class="clearfix">
            <KView class="payment-goods-content-info-title">支付方式</KView>
            <KView class="payment-goods-content-info-text" style="color:#505164">微信支付</KView>
          </KView>
          <KView class="clearfix">
            <KView class="payment-goods-content-info-title">实付</KView>
            <KView class="payment-goods-content-info-text payment-goods-content-info-price">¥{{orderData.totalPrice}}</KView>
          </KView>
          <KView v-if="orderData.type==='YYPM'" class="payment-goods-content-info-tip">
            注：一元拍卖商品实付金额会扣除1元预付款
          </KView>
        </KView>
      </KView>

      <KView class="payment-goods-btn" @click="toPay">支付</KView>
    </template>
  </KView>
</template>

<script>
  import Storage from 'storage';
  import SystemUtil from 'utils/systemUtil';
  import GlobalData from 'utils/globalData';

  import PageHeader from 'common/pageHeader';
  import DeliveryAddress from './deliveryAddress';
  import GoodsItem from './goodsItem';

  import GoodsPaymentApi from 'services/goodsPaymentApi';

  export default {
    data() {
      let orderId = this.$route.params.orderId;
      let type = this.$route.query.type;
      return {
        orderId,
        type,
        isMiniprogram: process.env.isMiniprogram,
        orderData: null,
        shopIcon: GlobalData.images.shopCart.shopIcon
      };
    },

    created() {
      window.resetAddress = address => {
        this.orderData.resetAddress(address);
      };

      if (SystemUtil.isEmpty(this.orderId)) {
        this.toBack();
        return;
      }

      this.setOrderData();
    },

    methods: {
      setOrderData() {
        SystemUtil.showLoading();
        GoodsPaymentApi.getOrderById(this.orderId).then(orderData => {
          this.orderData = orderData;
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toChangeAddress() {
        if (this.isMiniprogram) {
          window.open('/paymentAddress');
        }
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      },

      toPay() {
        let orderData = this.orderData;
        let buyerName = orderData.buyerName;
        if (buyerName === '') {
          this.$api.showToast({
            title: '请选择配送地址',
            icon: 'none'
          });
          return;
        }

        SystemUtil.showLoading('');
        GoodsPaymentApi.updateOrderAddress(orderData).then(() => {
          return GoodsPaymentApi.getPayData(orderData.orderId).then(data => {
            if (this.isMiniprogram) {
              wx.requestPayment({
                timeStamp: data.timeStamp,
                nonceStr: data.nonceStr,
                package: data.package,
                signType: data.signType,
                paySign: data.paySign,
                success: res => {
                  if (['orderPage', 'group', 'auction', 'bargain'].indexOf(this.type) !== -1) {
                    let pages = getCurrentPages();
                    let payWin = pages[pages.length - 2].window;
                    SystemUtil.showLoading('');
                    payWin.toPaymentSuccess().then(() => {
                      SystemUtil.hideLoading();
                      this.toPaySuccessPage();
                    }).catch(() => {
                      SystemUtil.hideLoading();
                    });
                    return;
                  }
                  this.toPaySuccessPage();
                }
              });
            }
            SystemUtil.hideLoading();
          });
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toPaySuccessPage() {
        let orderData = this.orderData;
        Storage.setSession('payPage', {
          name: orderData.shopName,
          price: orderData.totalPrice
        });
        if (this.isMiniprogram) {
          this.$emit('to-page', '/paymentSuccess');
        }
      }
    },

    components: {
      PageHeader,
      DeliveryAddress,
      GoodsItem
    }
  };

</script>

<style lang="scss">
  .payment-goods {
    height: 100%;

    .page-header {
      margin-bottom: formatPx(20);
    }

    .payment-goods-line {
      height: 1px;
      background: #DADADA;
    }

    .payment-goods-content-line {
      height: formatPx(18);
      background: #f2f2f2;
    }

    .payment-goods-content {
      margin-top: formatPx(35);
      height: calc(100% - #{formatPx(250)});
      overflow: auto;

      .order-delivery-address {
        margin-bottom: formatPx(32);
      }

      .payment-goods-content-goodsdata {
        margin-top: formatPx(40);
        padding: 0 formatPx(30);
        margin-bottom: formatPx(40);

        .payment-goods-content-shop {
          height: formatPx(40);
          margin-bottom: formatPx(30);

          >div {
            float: left;
            height: 100%;
          }

          .payment-goods-content-shop-icon {
            width: formatPx(30);
          }

          .payment-goods-content-shop-text {
            width: calc(100% - #{formatPx(50)});
            margin-left: formatPx(20);
            line-height: formatPx(40);
          }
        }

        .payment-goods-item {
          margin-bottom: formatPx(30);

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .payment-goods-content-info {
        margin-top: formatPx(34);
        margin-top: formatPx(34);
        padding: 0 formatPx(30);
        color: #000000;

        >div {
          font-size: formatPx(32);
          height: formatPx(45);
          line-height: formatPx(45);
          margin-bottom: formatPx(20);

          &:last-child {
            margin-bottom: 0;
          }
        }

        .payment-goods-content-info-title {
          float: left;
          height: 100%;
        }

        .payment-goods-content-info-text {
          float: right;
          height: 100%;
        }

        .payment-goods-content-info-price {
          color: #ff641f;
          font-size: formatPx(42);
        }

        .payment-goods-content-info-tip {
          color: #ff0000;
          font-size: formatPx(24);
        }
      }
    }

    .payment-goods-btn {
      margin: formatPx(26) formatPx(30) 0;
      height: formatPx(90);
      line-height: formatPx(90);
      font-size: formatPx(30);
      background: #59c264;
      color: #ffffff;
      text-align: center;
      border-radius: formatPx(45);
    }
  }

</style>
